<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>资源变更监听器</title>
</head>
<body>
  <h1>监听资源变化</h1>
  <ul id="log"></ul>
  <script>
    // 建立一个 SSE 连接
    const source = new EventSource("/mcp");

    // 做一个辅助方法
    function log(msg){
      const li = document.createElement("li");
      li.textContent = msg;
      document.getElementById("log").appendChild(li);
    }

    // 监听事件
    source.addEventListener("connected", (e)=>{
      log(e.data)
    })

    source.addEventListener("resource_changed", (e)=>{
      const info = JSON.parse(e.data);
      log(`资源发生变更：${info.event} ${info.path} at ${info.time}`)
    })

    source.addEventListener("error",()=>{
      log("连接已经断开⛓️‍💥")
    })
  </script>
</body>
</html>
